<template>
  <div class="contact">
    <section class="inner_banner">
      <div class="picture_container">
        <img src="../../images/commoncard/swiperCard/contactus.png" title="联系我们inbanner" alt="联系我们inbanner"
          class="inner_banner_pc">
      </div>
    </section>
    <div class="nav">
      <div class="center flex flex_column_center   flex_row_strat">
        <div class="flex item">
          <i class="iconfont icon-zhuye-copy"></i>当前位置：<a href="/" title="">首页</a><span
            class="iconfont icon-jiantou_liebiaoxiangyou_o"></span><a @click="currentLoactiongo()"
            title="联系我们">联系我们</a><span class="iconfont icon-jiantou_liebiaoxiangyou_o"></span><a title="联系方式"
            @click="currentLoactiongo()">联系方式</a><span class="iconfont icon-jiantou_liebiaoxiangyou_o"
            v-if="currentLoaction"></span><a href="javascript:;" :title="currentLoaction" class="active"
            onclick="return false">{{ currentLoaction }}</a>
        </div>
      </div>
    </div>
    <section class="center main1 clear_float">
      <div class="inner_left">
        <div class="center">
          <div class="left ">
            <div class="left_monu">
              <div class="title">
                <p class="cn">联系我们</p>
                <p class="en">Contact Us</p>
              </div>
              <div class="content">
                <ul>
                  <li :class="[currenttreeLevel1 ? 'active' : '']" v-for="(item, index) in contactTree" :key="index"
                    @click="clickServiceItem(item, index)">
                    <a class="flex flex_column_center flex_row_justify stair "
                      :class="[contactbool ? 'active_trans' : '']" href="javascript:;"><span class="flex1">{{ item.title
                        }}</span><i class="iconfont icon-jiantou_liebiaoxiangyou_o"></i></a>
                    <!-- <div class="down" :style="[{ display: contactbool ? 'block' : 'none' }]"> -->
                    <div class="down" :style="[{ display: contactbool ? 'block' : 'none' }]">
                      <ul>
                        <a title="本部地址" ref="letfNews" class="flex flex_column_center "
                          @click.stop="clickchilds(li, index)" v-for="(li, index) in item.chiildrens " :key="index">
                          <i class="icon"></i>
                          <li>{{ li.title }}</li>
                        </a>
                      </ul>
                    </div>
                  </li>

                </ul>
              </div>
            </div>


            <div class="left_tel">
              <img src="@/images/commoncard/qualityTel.png" alt="/服务质量监督ad2" title="/服务质量监督ad2">
            </div>
          </div>
        </div>
      </div>
      <div class="right" id="rightContent" v-if="rightshow">
        <div class="right_title clear_float">
          <h3>{{ rightTitle }}</h3>
        </div>
        <div class="content">
          <div class="explain_container">
            <div class="explain">
              <div class="explain_title">
                <div class="explain_icon">
                  <i class="el-icon-phone"></i>
                </div>
                <div class="explain_text">联系地址：</div>
              </div>
              <div class="explain_content">
                <p>{{ rightobj.addr }}</p>
              </div>
            </div>
            <div class="explain">
              <div class="explain_title">
                <div class="explain_icon">
                  <i class="el-icon-s-order"></i>
                </div>
                <div class="explain_text">业务联系：</div>
              </div>
              <div class="explain_content">
                <div v-html="rightobj.connection"></div>

              </div>
            </div>
            <div class="explain">
              <div class="explain_title">
                <div class="explain_icon">
                  <i class="iconfont  icon-youxiang1"></i>
                </div>
                <div class="explain_text">电子信箱：</div>
              </div>
              <div class="explain_content">
                <!-- <a href="mailto:zszjs@163.net" rel="nofollow">{{ rightobj.email }}</a> -->

                <span >{{ rightobj.email }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { config } from "@/common/config.js"
import scrollMixin from '@/mixins/scrollMixin';
export default {
  mixins: [scrollMixin],
  data () {
    return {
      contactTree: [
        {
          title: '联系方式',
          industryCat: 'ZJ_RYZZ',
          translate: 'true',
          active: true,
          chiildrens: [{
            title: '本部地址',
            industryCat: 'ZJ_QYZZ',
            type: "imageDispaly"
          }, {
            title: '古镇站地址',
            industryCat: 'ZJ_QYRY',
            type: "imageDispaly"
          }, {
            title: '小榄站地址',
            industryCat: 'ZJ_QYRY',
            type: "imageDispaly"
          }, {
            title: '阜沙站地址',
            industryCat: 'ZJ_QYRY',
            type: "imageDispaly"
          }, {
            title: '南头站地址',
            industryCat: 'ZJ_QYRY',
            type: "imageDispaly"
          }, {
            title: '火炬站地址',
            industryCat: 'ZJ_QYRY',
            type: "imageDispaly"
          },]
        },
      ],
      rightTitle: '',
      rightobj: {},
      rightshow: false,
      // 显示子li
      contactbool: false,
      currentLoaction: ''
    }
  },
  computed: {
    // 获取子li
    currenttreeLevel1 () {
      return this.contactTree[0].active
    }
  },
  watch: {
    '$route.query.index'(newVal, oldVal) {
      // 当 index 查询参数变化时执行的逻辑  
      console.log('监听路由变化', newVal, oldVal);
    }
  }, 
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.currentLoaction = this.contactTree[0].chiildrens[0].title
      this.contactbool = true
      try {
        await this.getproTree()
        this.clickchilds(this.contactTree[0].chiildrens[0], 0)
      } catch (error) {
        console.error('发生异常:', error);
            // 重新抛出异常
            throw error;
      }


    },
    previewPic (code) {
      return config.url + config.prefix + '/file/previewFile?code=' + code
    },

    async getproTree () {
      let params = {
        tenantId: 1,
        id: 8
      }
      try {
        const res = await this.$http.get(this.$api.contactUsApi.listPlateCatAndChildren, params);
        if (res.code == 200) {
          let result = [];
          let objArray = res.data;
          if (objArray.length > 0) {
            for (let [index, item] of objArray.entries()) {
              let detail = {
                id: item.id,
                title: item.title,
                bgPic: this.previewPic(item.bgPic)
              };
              result.push(detail);
            }
          }
          this.contactTree[0].chiildrens = result;
          return result; // 返回结果，使函数成为一个返回 Promise 的异步函数
        }
      } catch (error) {
        console.error('发生异常:', error);
            // 重新抛出异常
            throw error;
      }
    },
    //获取右边详情
    getdetail (data) {
      let params = {
        itemId: data
      }
      let _that = this
      this.$http.get(this.$api.contactUsApi.getContactUs, params).then(res => {
        if (res.code == 200) {
          _that.rightobj = res.data
          _that.rightshow = true

        }
      })
    },
    clickServiceItem (data) {
      this.gotop()
      this.currentLoaction = ''
      if (data.chiildrens?.length > 0) {
        this.contactbool = !this.contactbool
      }
    },
    gotop() {
      window.scrollTo(0, 0)
    },
    contacttype (data) {
      switch (data) {
        case '本部地址':
          return 'ZJ_RYZZ'
        case '古镇站地址':
          return 'ZJ_QYZZ'
        case '小榄站地址':
          return 'ZJ_QYRY'
        case '阜沙站地址':
          return 'ZJ_QYRY'
        case '南头站地址':
          return 'ZJ_QYRY'
      }
    },
    // 子列表
    clickchilds (data, index) {
      this.gotop()
      this.currentLoaction = data.title
      this.$nextTick(() => {
        this.$refs.letfNews[index].classList.add('active');
        for (let i = 0; i < this.$refs.letfNews.length; i++) {
          if (i != index) {
            this.$refs.letfNews[i].classList.remove('active');
          }
        }
      });
      this.rightTitle = data.title
      this.getdetail(data.id)
    },
    currentLoactiongo () {
      window.location.reload()
    }

  }
}
</script>
<style scoped>
@import '@/styles/index.scss';

/* contact START */
.contact{
    background-color: #f4f4f4;
}
.contact .nav {
    background-color: #f4f4f4;
}

.contact .main1 {
  padding: 20px 0 40px;
}
.contact .main1 .right {
    width: 75.83333%;
    background-color: #fff;
    padding: 50px;
}
.contact .main1 .right .explain {
  position: relative;
  padding-left: 40px;
}

.contact .main1 .right .explain:not(:last-child) {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.contact .main1 .right .explain:not(:first-child) {
  padding-top: 18px;
}

.contact .main1 .right .explain:not(:first-child) .explain_title .explain_icon {
  top: 18px;
}

.contact .main1 .right .explain .explain_title .explain_icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  color: #1f6cc1;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  border: solid 1px #1f6cc1;
  background: #e7eff7;
}

.contact .main1 .right .explain .explain_title .explain_text {
  color: #555;
  font-size: 16px;
  line-height: 28px;
  font-weight: bold;
}

.contact .main1 .right .explain .explain_content {
  line-height: 32px;
  font-size: 16px;
  margin-top: 2px;
  color: #666;
}

/* contact END */
/* download START */
.download .nav {
  background: #fff;
}

.download .main1 {
  padding: 20px 0 40px;
}

.download .main1 .right .right_title {
  margin-bottom: 5px;
}

.download .main1 .right .download_list .item:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.download .main1 .right .download_list .item:hover .item_title {
  color: #1f6cc1;
}

.download .main1 .right .download_list .item:hover .item_icon {
  color: #1f6cc1;
}

.download .main1 .right .download_list .item_container {
  height: 60px;
}

.download .main1 .right .download_list .item_title {
  width: 470px;
  font-size: 16px;
  color: #333333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -o-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.download .main1 .right .download_list .item_title .iconfont {
  font-size: 20px;
  color: #516374;
  margin-right: 12px;
  position: relative;
  top: 1px;
}

.download .main1 .right .download_list .item_time {
  font-size: 14px;
  color: #b2b2b2;
}

.download .main1 .right .download_list .item_icon {
  font-size: 20px;
  color: #516374;
  -o-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.download .main1 .right .paging {
  margin-top: 30px;
}

/* download END */
/* centre START */
.centre .nav {
  background: #fff;
}

.centre .main1 {
  padding: 20px 0 40px;
}

.centre .main1 .left .left_monu .title .en {
  letter-spacing: 0;
  font-size: 12px;
}

.centre .main1 .right .right_title {
  margin-bottom: 20px;
}

.centre .main1 .right .content_container {
  line-height: 32px;
  font-size: 16px;
  color: #666;
}

.centre .main1 .right .contact_container {
  margin-top: 40px;
  border-radius: 5px;
  background: #f9f9f9;
  padding: 22px 30px 30px;
}

.centre .main1 .right .contact_container .explain_title {
  text-align: center;
  letter-spacing: 1px;
  font-weight: bold;
  color: #444444;
  font-size: 26px;
}

.centre .main1 .right .contact_container .contact_list {
  margin-top: 26px;
}

.centre .main1 .right .contact_container .item {
  width: 400px;
  border-radius: 5px;
  background: #ffffff;
  border: solid 1px #eeeeee;
  text-align: center;
  line-height: 28px;
  color: #444444;
  margin-top: 20px;
  font-size: 16px;
  padding: 20px 10px;
}

.centre .main1 .right .contact_container .item:nth-child(1),
.centre .main1 .right .contact_container .item:nth-child(2) {
  margin-top: 0;
}

/* centre END */
/* about_video START */
.about_video .nav {
  background: #fff;
}

.about_video .main1 {
  padding: 20px 0 40px;
}

.about_video .main1 .right .right_title {
  margin-bottom: 30px;
}

.about_video .main1 .right .video_list .item {
  width: 31.2%;
  margin-top: 28px;
}

.about_video .main1 .right .video_list .item:not(:nth-child(3n-2)) {
  margin-left: 3.2%;
}

.about_video .main1 .right .video_list .item:nth-child(1),
.about_video .main1 .right .video_list .item:nth-child(2),
.about_video .main1 .right .video_list .item:nth-child(3) {
  margin-top: 0;
}

.about_video .main1 .right .video_list .item:hover .item_picture .item_icon {
  background: rgba(24, 102, 176, 0.5);
}

.about_video .main1 .right .video_list .item:hover .item_explain {
  color: #1f6cc1;
}

.about_video .main1 .right .video_list .item .item_picture {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.about_video .main1 .right .video_list .item .item_picture .picture_container {
  padding-top: 63.76%;
}

.about_video .main1 .right .video_list .item .item_picture .item_icon {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 40px;
  color: #fff;
  background: rgba(24, 102, 176, 0.2);
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.about_video .main1 .right .video_list .item .item_explain {
  font-size: 16px;
  color: #444444;
  text-align: center;
  margin-top: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -o-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.about_video .main1 .right .paging {
  margin-top: 35px;
}

.about_video .video_popup {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 10000;
  max-width: 1920px;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}

.about_video .video_popup .video_popup_container {
  overflow-y: auto;
  padding: 5% 0;
  height: 100%;
}

.about_video .video_popup.active .center {
  -o-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.about_video .video_popup .center {
  margin: auto;
  width: 1000px;
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 25px 25px 0;
  opacity: 0;
  -o-transform: translate3d(0, -100px, 0);
  -moz-transform: translate3d(0, -100px, 0);
  -webkit-transform: translate3d(0, -100px, 0);
  transform: translate3d(0, -100px, 0);
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.about_video .video_popup .center .close {
  position: absolute;
  right: -10px;
  top: -10px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  text-align: center;
  background: #1f6cc1;
  font-size: 18px;
  cursor: pointer;
  color: #fff;
}

.about_video .video_popup .center .close:hover {
  opacity: 0.95;
}

.about_video .video_popup .center #video {
  overflow: hidden;
  position: relative;
  padding-top: 63.76%;
  border-radius: 10px;
  background: #f4f4f4;
}

.about_video .video_popup .center #video video {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

.about_video .video_popup .center .video_explain {
  padding: 15px 15px 20px;
  text-align: center;
  line-height: 28px;
  font-size: 16px;
  color: #333;
}

/* about_video END */

@import '@/styles/index.scss';

.right .right_function a .iconfont {
  color: #fff;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #dedede;
  margin-bottom: 5px;
  font-size: 16px;
  text-align: center;
  line-height: 27px;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
</style>